<template>
	<!-- 轮播图 -->
	<slideshow :swiperList='swiperList'></slideshow>
	<!-- 到期积分 -->
	<view class="point">
		<view class="point_n">
			<view class="">
				<image src="../../static/icon/score.png" mode=""></image>
				<text class="zhioo">本月暂无到期积分</text>
			</view>
			<text class="jifenzhi">0</text>
			
			<text class="zhiooo" @click="gopages('/pages/integral-rule/integral-rule')">查看积分规则 ></text>
			
		</view>
	</view>
	<view class="titi">

	</view>
	<!-- 人气卡券 -->
	<view class="titles">
		<text>人气卡券</text>
		<text>更多 ></text>
	</view>
	<view class="neirong">
		<view class="yinpin">
			<template v-for="value in point">
				<points :info="value"></points>
			</template>
		</view>
	</view>
	
	<!-- 人气卡券 -->
	<!-- <view class="titles">
		<text>人气卡券</text>
		<text>更多 ></text>
	</view> -->

</template>

<script setup>
	import{onMounted, ref} from"vue"
	import {getCoupon} from "../../services/points.js";
	let point = ref([]);
	  onMounted(async (options)=>{
	    let data = await getCoupon();
	    // console.log(data);
	    point.value= data.result
	    console.log(data.result,"88");
	  })
	// import {
	// 	onReady
	// } from "@dcloudio/uni-app";
	//存放轮播图数组
	let swiperList = ref([
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.ntimg.cn%2Ffile%2F20200820%2F12897125_081615415000_2.jpg&refer=http%3A%2F%2Fpic.ntimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358213&t=f20c748aafcdc3ea561f4f5de081f791',
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp4.itc.cn%2Fq_70%2Fimages01%2F20210929%2F5e3f614c2b4040f7b6e117d64ce91a51.png&refer=http%3A%2F%2Fp4.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358133&t=2432cee543c5ee7b643bcbd17b9b8e37',
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.qhimgs3.com%2Ft010742f39fee8fb75a.jpg&refer=http%3A%2F%2Fp3.ssl.qhimgs3.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358180&t=b5176cc154d033a5651e93f17334d722'
	]);
	//获取轮播图数据
	// onReady(async () => {
	// 	let data = await getBannerImg();
	// 	swiperList.value = data;
	// 	console.log(swiperList.value);
	// })
	function gopages(url){
		uni.navigateTo({
			url
		})
	}
	
</script>

<style>
template{
		position: relative;top: 20rpx;
	}
	button {
		margin: 0 10rpx 20rpx 0;
		padding: 0rpx;
		height: 50rpx;
		width: 100rpx;
		border-radius: 40rpx;
		background-color: #0550c8;
		font-size: 20rpx;
		color: #ffffff;
	}

	image {
		height: 330rpx;
		width: 330rpx;
	}
	/* 积分白色栏目 */
	.point{
		background-color: #f8f8f8;
	}
	.point_n{
		position: absolute;
		top: 380rpx;
		left: 30rpx;
		width: 690rpx;
		height: 200rpx;
		margin: auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		
	}
	.point_n>view>image{
		margin-right: 15rpx;
		height: 30rpx;
		width: 30rpx;
	}
	.point_n>view{
		margin-left: 50rpx;
		margin-top: 40rpx;
	}
	.jifenzhi{
		font-size: 60rpx;
		color: #0550c8;
		font-weight: 600;
		margin: 45rpx;
		padding: 0;
	}
	/* 下面内容 */
	.neirong{
		/* display: flex; */
		background-color: #f8f8f8;
	}

	.img {
		height: 330rpx;
		width: 330rpx;
		margin-bottom: 10rpx;
	}
	.titi{
		height: 180rpx;
		width: 100%;
		background-color: #f8f8f8;
	}

	.titles {
		height: 65rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #f8f8f8;
		align-items: center;
	}

	.titles>text:nth-child(1) {
		margin-left: 30rpx;
		font-size: 36rpx;
		font-weight: 500;
	}

	.titles>text:nth-child(2) {
		font-size: 25rpx;
		color: #999999;
		margin-right: 30rpx;
		font-weight: 400;

	}

    points{
		margin: 20rpx 0 10rpx 10rpx;
	}
	.yinpin {
		display: flex;
		flex-wrap: wrap;
		margin-left: 30rpx;
		background-color: #ffffff;
		width: 750rpx;
		height: 00rpx;
		border-radius: 15rpx;
	}
	.yinpin_name{
		font-size: 30rpx;
		font-weight: 800;
	}

	.yinpin>image {
		margin: auto;
	}
	.jifen_buttom{
		margin-top: 10rpx;
		width: 330rpx;
		height: 100rpx;
	}
	.jifen_buttom>text{
		margin-top: 5rpx;
	}
	.zhi{
		font-size: 35rpx;
		color: #0550c8;
		font-weight: 800;
		margin-left: 10rpx;
		margin-right: 5rpx;	
	}
	.zhio{
		font-size: 22rpx;
		color: #c5c5c5;
		margin: 10rpx 0 0 10rpx;
	}
	.zhioo{
		font-size: 30rpx ;
		color: #848484;
	}
	.zhiooo{
		margin-left: 380rpx;
		font-size: 22rpx ;
		color: #848484;
	}
	.jifen_c{
		display: flex;
		justify-content: space-between;
	}


</style>
